<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本资料</title>
  <!-- 导入layui样式 -->
  <link rel="stylesheet" href="../assets/lib/layui/css/layui.css">

  <!-- 导入 cropper样式表 -->
  <link rel="stylesheet" href="../assets/lib/cropper/cropper.css" />
</head>
<style>
  /* 设置盒子全局样式 */
  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    padding: 0 8px;
    background-color: #f2f3f5;
  }

  /* 设置卡片主体区域的宽度 */
  .layui-card-body {
    width: 500px;
  }

  /* 设置按钮行的样式 */
  .row2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  /* 设置裁剪区域的样式 */
  .cropper-box {
    width: 350px;
    height: 350px;
    background-color: cyan;
    overflow: hidden;
  }

  /* 设置第一个预览区域的样式 */
  .w100 {
    width: 100px;
    height: 100px;
    background-color: gray;
  }

  /* 设置第二个预览区域的样式 */
  .w50 {
    width: 50px;
    height: 50px;
    background-color: gray;
    margin-top: 50px;
  }

  /* 设置预览区域下方文本的样式 */
  .size {
    font-size: 12px;
    color: gray;
    text-align: center;
  }

  /* 设置图片行的样式 */
  .row1 {
    display: flex;
  }

  /* 设置 preview-box 区域的的样式 */
  .preview-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
  }

  /* 设置 img-preview 区域的样式 */
  .img-preview {
    overflow: hidden;
    border-radius: 50%;
  }
</style>

<body>
  <div class="layui-card">
    <div class="layui-card-header">更换头像</div>
    <div class="layui-card-body">
      <!-- 第一行的图片裁剪和预览区域 -->
      <div class="row1">
        <!-- 图片裁剪区域 -->
        <div class="cropper-box">
          <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
          <img id="image" src="../assets/images/sample.jpg" />
        </div>
        <!-- 图片的预览区域 -->
        <div class="preview-box">
          <div>
            <!-- 宽高为 1.25rem 的预览区域 -->
            <div class="img-preview w100"></div>
            <p class="size">100 x 100</p>
          </div>
          <div>
            <!-- 宽高为 .625rem 的预览区域 -->
            <div class="img-preview w50"></div>
            <p class="size">50 x 50</p>
          </div>
        </div>
      </div>

      <!-- 第二行的按钮区域 -->
      <div class="row2">
        <!-- 通过 accept 属性，可以指定，允许用户选择什么类型的文件 -->
        <input type="file" id="file" accept="image/png,image/jpeg" style="display: none;" />
        <button type="button" class="layui-btn" id="btnChooseImage">上传</button>
        <button type="button" class="layui-btn layui-btn-danger" id="btnUpload">确定</button>

      </div>
    </div>
  </div>

  <!-- 导入layui。js -->
  <script src="../assets/lib/layui/layui.all.js"></script>
  <!-- 导入jquery -->
  <script src="../assets/lib/jquery.js"></script>
  <!-- 导入自己的js -->
  <!-- <script src="../assets/js/user_info.js"></script> -->
  <!-- 导入baseAPI.js -->
  <script src="../assets/js/mybaseAPI.js"></script>
  <script src="../assets/lib/cropper/Cropper.js"></script>
  <script src="../assets/lib/cropper/jquery-cropper.js"></script>
  <script>
    // 1. 获取裁剪区
    // 1.1 获取裁剪区域的 DOM 元素
    let $image = $('#image')
    let layer = layui.layer
    // 1.2 配置选项
    const options = {
      // 纵横比
      aspectRatio: 1,
      // 指定预览区域
      preview: '.img-preview'
    }
    // 1.3 创建裁剪区域
    $image.cropper(options)
    // 业务 替换图片
    //替换图片 发生改变时触发
    $('#file').on('change', function (e) {
      // 1.1 获取图片上传按钮上的图片数组（！数组）
      let fileList = e.target.files
      // 1.2 如果过 fileList 数组的长度为0，阻止后续逻辑执行
      if (fileList.length <= 0) {
        return layer.msg('请选择图片')
      }
      // 1.3 有图片时 拿到fileList 数组第一个（索引为0 d的那张图片）
      let file = fileList[0]
      // （1）如果面试问道如何优化签订代码，提高代码执行效率， ： 如果有多个地方都用到同一个对象下的某一个属性时，可以在公共作用域中将这个属性提取成一个变量，在这些都需要使用的地方都去访问呢这个变量即可。
      // 1.4 图片文件转化为页面显示的路径
      let imgUrl = URL.createObjectURL(file)
      // 1.5 初始化剪裁区域
      // 3.4 重新初始化裁剪区域
      $image.cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', imgUrl) // 重新设置图片路径
        .cropper(options) // 重新初始化裁剪区域

    })
    // 2 业务逻辑通过上传按钮，模拟点击input上传框，目的:用一个比较优美的按钮代替丑陋的input框
    // 2.1 拿到上传按钮元素
    $('#btnChooseImage').on('click', function (e) {
      // 阻止默认事件
      e.preventDefault()
      // 模拟人的点击事件
      $('#file').click()
      // 通过cssinput图片提交框
    })
    // 3 为确定按钮绑定点击事件
    $('#btnUpload').on('click', function () {
      // 4 拿到用户剪裁之后的头像// 创建一个canvas画布
      let dataURL = $image.cropper('getCroppedCanvas', {
          width: 100, // 裁减成100*100的新图片
          height: 100

        })
        .toDataURL('Image/png') // 讲canvas画布上的内容转化成叭涩和格式的字符串
      //（2）如果面试问道如何优化签订代码，提高代码执行效率？
      // 将一些小图标或者是小图片（精灵图），转化成base64进行存储，这样坐的目的是减少额外的图片请求，但是她回避原本图片大大约30%
      // 调用接口方法
      uploadImage(dataURL)
    })
    // 封装调用接口方法 
    function uploadImage(imageUrl) {
      // 创建入参数据
      let data = {
        avatar: imageUrl
      }
      $.ajax({
        method: 'POST',
        url: '/my/update/avatar',
        data: data,
        success: function (res) {
          // 判断接口请求是否成功
          if (res.status !== 0) {
            return layer.msg(res.message || '更新头像失败')
          }
          layer.msg(res.message || '更新头像成功')
          // 刷新页面数据
          window.parent.getUserInfo()
        }
      })
    }
  </script>



</body>

</html>